<template>
	<NavCustom/>
	<view class="flex justify-around padding category text-center">
		<view 
			v-for="(item,index) in category" 
			:class="{active:index==tabIdx}" 
			@click="handleTab(index,item.bid)"
		>
			{{item.name}}
		</view>
	</view>
	<view class="cake-list flex flex-wrap justify-between">
		<CakeItem  v-for="item in cakeList" :gdata="item"/>
	</view>
	<view class="padding text-center text-gray" v-if="finished">
		没有更多了
	</view>
</template>

<script setup>
import {onLoad,onReachBottom,onPullDownRefresh} from '@dcloudio/uni-app'
import { ref } from "vue";
import { cakeGet } from '../../api/cake';
import CakeItem from '../../components/cake-item.vue'
import {$http} from '../../utils/http.js'
const cakeList = ref([])
let page = 1 // 分页
let bid = 1  //区分不同分类
const finished = ref(false)
const fetchData = ()=>{
	console.log(bid);
	cakeGet(page,bid).then(res=>{
		uni.stopPullDownRefresh() //关闭下拉刷新
		let {results} = res.data
		if(results.length){
			cakeList.value = [
				...cakeList.value,
				...results
			]
			page++
		}
		if(results.length<8){
			finished.value = true
		}
	})
}
// 首屏列表
fetchData()

// 触底
onReachBottom(()=>{
	console.log('触底了');
	if(finished.value){ return } 
	fetchData()
})

// 下拉刷新
onPullDownRefresh(()=>{
	console.log('下拉刷新');
	cakeList.value = []
	page=1
	
	fetchData()
})

// 分类菜单
const category = [
	{name:'蛋糕',bid:1},
	{name:'面包',bid:11},
	{name:'小食',bid:6},
	{name:'配件',bid:5},
]
const tabIdx = ref(0)
const handleTab = (idx,id)=>{
	tabIdx.value = idx
	bid = id
	cakeList.value = []
	page=1
	finished.value = false
	fetchData()
}
</script>

<style lang="scss">
page{
	background-color: #fff;
}

.category{
	position: sticky;
	top: 40px;
	z-index: 2;
	background-color: #fff;
	view{
		// border: 1px solid red;
		width: 25%;
		position: relative;
		color: #999;
		&::after{
			content:'';
			position: absolute;
			right: 0;
			top: 0;
			width: 1px;
			height: 100%;
			transform: scaleX(0.5);
			background-color: #d8d8d8;
		}
		&:last-of-type::after{
			width: 0;
		}
		&.active{
			color: #000;
		}
	}
}
</style>
